<template>
  <div class="edit-houses">
    <div class="house-box" v-for="index in count" :key="index" @click="addClickHandler(index-1)">
      <div class="house-item" v-if="index <= currentData.length">
        <estate-item :key="index" :showRules="false" :styleType="styleType" :showCard="showCard" :preview="preview" :isInArticle="isInArticle" :info="itemData(index-1)"/>
        <i class="icon del-icon" v-if="!preview" @click.stop="delClickHandler(index-1)"/>
      </div>
      <div class="empty-box" v-if="index > currentData.length && !preview">
        <div class="info-box">
          <div class="add-icon">
            <i class="icon iconfont icon-write_add"></i>
          </div>
          <p class="help-text">插入推荐的新房{{ isInArticle ? '/其它房源' : '' }}</p>
          <!-- <p v-if="reminder" class="remind-text">若无推荐楼盘将进行随机推荐</p> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import EstateItem from 'COMP/EstateItem/indexInArtcile'
export default {
  components: {
    EstateItem
  },
  props: {
    showCard: {type: Boolean, default: false},
    count: { type: Number, default: 3 },
    value: { type: Array },
    status: { tyle: String, default: 'empty' },
    reminder: { type: Boolean, default: false },
    preview: { type: Boolean, default: false },
    isInArticle: { type: Number, default: 0 },
    styleType: { type: Number, default: 0 }
  },
  data: () => ({
    currentData: []
  }),
  methods: {
    delClickHandler(index) {
      this.$delete(this.currentData, index)
      this.$emit('delete', index);
    },
    addClickHandler(index) {
      //保存推荐楼盘点击项的索引，在添加楼盘的地方，删除该索引的楼盘数据
      sessionStorage.setItem("selectedHouseIndex",index)
      this.$emit('click')
    },
    itemData(index) {
      // try {
        let temp = this.currentData[index]
        if (this.styleType) return temp
        if (!temp) return {}
        if (!temp.city) temp.city = temp.site
        if (!temp.linkerTags) {
          if(this.isInArticle==1){
            temp.linkerTags = [...temp.condition]
          }else{
            let statusArr = ['在售', '待售', '', '售罄']
            temp.linkerTags = [statusArr[temp.saleStatus], ...temp.condition]
          }
        }
        while (temp && temp.linkerTags.length > 3) {
          temp.linkerTags.pop()
        }
        return temp        
      // } catch (error) {
      //   console.log(error);
      //   return {};
      // }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.currentData = val
      },
      deep: true
    },
    currentData: {
      handler(val) {
        this.$emit('input', val)
      },
      deep: true
    }
  }
}
</script>
<style lang="less">
.edit-houses {
  // margin: 0 -5px;  
  > .house-box {
    margin-bottom: 10px;
    border: 1px dashed #007AE6;
    // background: rgba(0,122,230,0.1);
    > .house-item {
      position: relative;
      line-height: 1;
      > .del-icon {
        position: absolute;
        width: 28px;
        height: 28px;
        background: url(../../../assets/img/article/articlex.png) center no-repeat;
        background-size: 100% 100%;
        top: 0;
        right: 0;
        color: #ea4d2e;
      }
    }
    > .empty-box {
      position: relative;
      height: 122px;
      > .info-box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        line-height: 1.3;
        > .add-icon {
          > i {
            font-size: 24px;
          }
        }
        > .help-text {
          font-size: 14px;
          font-weight: 400;
          color: #445166;
        }
        > .remind-text {
          font-size: 12px;
          font-weight: 400;
          color: #969ea8;
        }
      }
    }
  }
}
</style>
